<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    .el-header, .el-footer {
      float: right;
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }
    
    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      /* line-height: 200px; */
    }
    
    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      /* line-height: 160px;+  */
    }
    
    body > .el-container {
      margin-bottom: 40px;
    }
    
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }
    
    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }

    .login-register{
        float: right;
    }

    .tag{
        float: left;
        padding-right: 1%;
    }

    .chil-blog{
      float: left;
    }
  </style>
<body>
    <div id="app">
        <el-container>
            <el-header>  
                <div>
                    <span class="tag">java</span>
                    <span class="tag">java</span>
                    <span class="tag">java</span>
                    <span class="tag">java</span>
                </div>            
                  
                  <span class="login-register">登录 | 注册</span>
            </el-header>

            <el-container>
              <el-main>
                <div class="chil-blog">
                  <span>加精</span>
                  <span hidden>博客UUID</span>
                  <span>标签UUID</span>
                  <span>博客标题</span>
                  <span hidden>博客内容</span>
                  <span>博客作者</span>
                  <span>博客发表时间</span>
                  <span hidden>博客状态</span>
                </div>
                <div style="padding: 2%;"></div>
                <div class="chil-blog">
                  <span hidden>博客UUID</span>
                  <span>标签UUID</span>
                  <span>博客标题</span>
                  <span hidden>博客内容</span>
                  <span>博客作者</span>
                  <span>加精</span>
                  <span hidden>博客状态</span>
                  <span>博客发表时间</span>
                </div>
                <div style="padding: 2%;"></div>
                <div class="chil-blog">
                  <span hidden>博客UUID</span>
                  <span>标签UUID</span>
                  <span>博客标题</span>
                  <span hidden>博客内容</span>
                  <span>博客作者</span>
                  <span>加精</span>
                  <span hidden>博客状态</span>
                  <span>博客发表时间</span>
                </div>
                <div style="padding: 2%;"></div>
                <div class="chil-blog">
                  <span hidden>博客UUID</span>
                  <span>标签UUID</span>
                  <span>博客标题</span>
                  <span hidden>博客内容</span>
                  <span>博客作者</span>
                  <span>加精</span>
                  <span hidden>博客状态</span>
                  <span>博客发表时间</span>
                </div>
                </el-main>
              <el-aside width="200px">
                  <p>java</p>
                  <p>mysql</p>
                  <p>java</p>
                  <p>mysql</p>
                </el-aside>
            </el-container>
          </el-container>
          
    </div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            input: '',
        },
        methods: {
        
        }
    })
</script>
</html>